<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <link rel="stylesheet" href="<%=request.getContextPath() %>/styles/bower_components/bootstrap/dist/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="<%=request.getContextPath() %>/styles/bower_components/font-awesome/css/font-awesome.min.css">
  <!-- Ionicons -->
  <link rel="stylesheet" href="<%=request.getContextPath() %>/styles/bower_components/Ionicons/css/ionicons.min.css">
  <!-- Theme style -->
  <link rel="stylesheet" href="<%=request.getContextPath() %>/styles/dist/css/AdminLTE.min.css">
  <!-- DataTables style -->
  <link rel="stylesheet" href="<%=request.getContextPath() %>/styles/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
  <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
        page. However, you can choose any other skin. Make sure you
        apply the skin class to the body tag so the changes take effect. -->
  <link rel="stylesheet" href="<%=request.getContextPath() %>/styles/dist/css/skins/skin-blue.min.css">
  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="<%=request.getContextPath() %>/styles/plugins/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="<%=request.getContextPath() %>/styles/plugins/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <link rel="stylesheet"
        href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
<title>Insert title here</title>
</head>
<body>
<div class="container">
    <table id="myMenuTable">
        <thead>
            <tr>
                <th>菜单id</th>
                <th>菜单名</th>
                <th>地址路径</th>
            </tr>
        </thead>
        <!-- dataTables goes here -->
    </table>
</div>
<!-- jQuery 3 -->
<script src="<%=request.getContextPath() %>/styles/bower_components/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap 3.3.7 -->
<script src="<%=request.getContextPath() %>/styles/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- jQuery DataTables -->
<script src="<%=request.getContextPath() %>/styles/bower_components/datatables.net/js/jquery.dataTables.js"></script>
<!-- JQuery Slimscroll -->
<script src="<%=request.getContextPath() %>/styles/bower_components/jquery-slimscroll/jquery.slimscroll.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	// use server side paging
	$("#myMenuTable").DataTable({
	    theme: "bootstrap",
	    serverSide: true,
	    paging: true,
	    ajax: {
	    	url: "<%=request.getContextPath() %>/menu/data/tables/paging",
	    	type: "POST",
	    	data: function(d){
	    	   for(var key in d){
                    if(key.indexOf("columns")==0||key.indexOf("order")==0||key.indexOf("search")==0){ //以columns开头的参数删除
                        delete d[key];
                    }
                }
	    		var searchParams = { // customize params
	    			page : d.start == 0 ? 1 : (d.start/d.length + 1),
	                rows : d.length
	            };
	    		if(searchParams){
	    			$.extend(d,searchParams);
	    		}
	    	},
	    	dataType: "json", // return as json
	    	dataFilter: function(resp){
	    		return resp;
	    	},
	    },
	    destory: true,
	    columns: [{data: "id"},{data: "text"},{data: "url"}],
	    // pageLength: 3 // initial records per page
    });
});
</script>
</body>
</html>